<template>
	<BasicTable @register="registerTable" :rowSelection="rowSelection">
		<template #tableTitle>
			<!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> -->
			<a-dropdown v-if="selectedRowKeys.length > 0">
				<template #overlay>
					<a-menu>
						<a-menu-item key="1" @click="batchHandleDelete">
							<Icon icon="ant-design:delete-outlined"></Icon>
							删除
						</a-menu-item>
					</a-menu>
				</template>
				<a-button>批量操作
					<Icon icon="ant-design:down-outlined"></Icon>
				</a-button>
			</a-dropdown>

		</template>
		<template #action="{ record }">
			<TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
		</template>
	</BasicTable>
	<DetailDrawer @register="registerDetailDrawer" @success="reload" />
	<TaskDrawer @register="registerTaskDrawer"/>
</template>
<script lang="ts" setup>
import {BasicTable, TableAction} from '/@/components/Table';
import {useDrawer} from '/@/components/Drawer';
import {batchDeleteMsgPush, deleteMsgPush, getById, listMsgPush, rePush} from './history.api';
import {columns, searchFormSchema} from './history.data';
import TaskDrawer from '../task/TaskDrawer.vue';
import DetailDrawer from './DetailDrawer.vue';
import {useMessage} from "/@/hooks/web/useMessage";
import {useListPage} from '/@/hooks/system/useListPage'
import {Icon} from '/@/components/Icon'

const { createMessage } = useMessage();
const [registerTaskDrawer, { openDrawer: openTaskDrawer }] = useDrawer();
const [registerDetailDrawer, { openDrawer: openDetailDrawer }] = useDrawer();

// 列表页面公共参数、方法
const { prefixCls, tableContext } = useListPage({
	designScope: 'msg-history',
	tableProps: {
		title: '消息推送列表',
		api: listMsgPush,
		columns: columns,
		actionColumn: {
			width: 130,
			title: '操作',
			dataIndex: 'action',
			fixed: 'right',
			slots: { customRender: 'action' },
		},
		bordered: false,
		formConfig: {
			schemas: searchFormSchema,
			fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
		},
	}
})

const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

/**
 * 操作列定义
 * @param record
 */
function getActions(record) {
	return [
		{
			label: '推送',
			popConfirm: {
				title: '确定要重新推送?',
				confirm: handleRePush.bind(null, record),
			},
		}
	]
}

const handlePushTaskDetail = (record) => {
	openTaskDrawer(true, {
		isUpdate: true,
		record: {
			id: record.taskId
		}
	}
	)
}
/**
 * 删除事件
 */
async function handleDelete(record) {
	await deleteMsgPush({ id: record.id }, reload);
}

/**
 * 重新推送消息
 */
function handleRePush(record) {
	createMessage.loading({
    content: `正在推送消息...`,
    key: 're_push_msg',
    duration: 0,
  });

	rePush({ id: record.id }).then(res => {
		reload()
		createMessage.success({
      content: `推送结束`,
      key: 're_push_msg',
      duration: 2,
    });
		getById({ id: record.id }).then(getData => {
			openDetailDrawer(true, { record: getData })
		})
	}).catch(res => {
		createMessage.destroy('re_push_msg');
		reload()
		getById({ id: record.id }).then(getData => {
			openDetailDrawer(true, { record: getData })
		})
	})
}

/**
 * 详情
 */
function handleDetail(record) {
	// showFooter.value = false;
	// openRoleDesc(true, {
	// 	record,
	// 	isUpdate: true,
	// });
	openDetailDrawer(true, { record })
}

/**
 * 批量删除事件
 */
async function batchHandleDelete() {
	await batchDeleteMsgPush({ ids: selectedRowKeys.value }, reload);
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record) {
	return [
		{
			label: '详情',
			onClick: handleDetail.bind(null, record),
		},
		{
			label: '任务',
			onClick: handlePushTaskDetail.bind(null, record),
		},
		{
			label: '删除',
			popConfirm: {
				title: '是否确认删除',
				confirm: handleDelete.bind(null, record),
			},
		}
	]
}
</script>
